import React from 'react'
import {Button,message,Modal ,Table} from 'antd'
import {DeleteOutlined,EditOutlined,ExclamationCircleOutlined,ToTopOutlined} from '@ant-design/icons'
import {useState,useEffect} from 'react'
import axios from 'axios'
// import { Switch } from 'react-router'
const { confirm } = Modal;
export default function NewsDraft(props) {
    // 新闻数据列表
    const [dataSource, setdataSource] = useState([])

    const {username}=JSON.parse(localStorage.getItem("token"))
    // 获取新闻数据列表
    useEffect(()=>{
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res=>{
            const list=res.data;
            setdataSource(list);
        })
    },[username])

    const confirmMethods=(item)=>{
        confirm({
            title: '您确定要删除吗？',
            icon: <ExclamationCircleOutlined />,
            content: '',
        
            onOk() {
                deleteMethod(item);
            },
        
            onCancel() {
              
            },
          });
    }
    //删除菜单项
    const deleteMethod =(item)=>{
        setdataSource(dataSource.filter(data=>data.id!==item.id));
        axios.delete(`/news/${item.id}`)
        message.error('已删除此条新闻')
    }

    // 提交审核
    const handleCheck = (id)=>{
        axios.patch(`/news/${id}`,{
            auditState:1
        }).then(res=>{
            // 跳转页面
            props.history.push('/audit-manage/list')
            message.success('您可以到审核列表中查看您的新闻')
        })
    }
      
      const columns = [
        {
            // 列表标题
          title: 'ID',
        //   列表内容名称
          dataIndex: 'id',
          render:(id)=>{
              return <b>{id}</b>
          }
        },
        {
          title: '新闻标题',
          dataIndex: 'title',
          render:(title,item)=>{
            return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
          }
        },
        {
          title: '作者',
          dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category)=>{
                return category.title
            }
          },
        {
            title:'操作',
            render:(item)=>{
                return (
                    <div>
                        {/* 删除按钮 */}
                        <Button danger shape="circle" icon={<DeleteOutlined />}
                        onClick={()=>confirmMethods(item)}></Button>
                        {/* 修改按钮 */}
                        <Button shape="circle" icon={<EditOutlined />} 
                        onClick={()=>{props.history.push(`/news-manage/update/${item.id}`)}}></Button>
                        {/* 提交审核按钮 */}
                        <Button type="primary" shape="circle" icon={<ToTopOutlined />}
                        onClick={()=>handleCheck(item.id)}></Button>
                    </div>
                )
            }
        }
      ];
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} 
            rowKey={(item)=>item.id}
            pagination={{
                pageSize:6
            }}/>
        </div>
    )
}
